<template>
	<view class="content">
		<headBar :toTitle="'订单详情'"></headBar>
		<view style="position: fixed;top:0;background: #F4F5F9;z-index: -2;width:100%;height:100vh;"></view>
		<image class="bg-img" src="@/static/bgx.png"></image>

		<div style="height: 12px;"></div>
		<div class="baseCon">
			<div class="zflex">
				<image class="oilImg" src="/static/images/oilImg.png"></image>
				<div style="width: calc(100% - 60px);">
					<div class="zflex">
						<div style="font-size: 15px;font-weight: bold;margin-right: auto;">{{form.oilName}}</div>
						<div style="font-size: 15px;color: #ff6c1e;font-weight: 500;">¥{{form.actualPayment}}</div>
					</div>
					<div><span class="oil-tl">价格：</span><span class="oil-tr">¥{{form.discountPrice}}</span></div>
					<div><span class="oil-tl">数量：</span><span class="oil-tr">约{{form.refueleQuantity}}L/kg</span></div>
				</div>
			</div>

			<div class="zline"></div>
			<div class="same-w" style="margin-top: 6px;">
				<div class="detail-lef">实收款</div>
				<div class="detail-rig">{{form.actualPayment}}</div>
			</div>

			<div class="same-w" style="margin-top: 6px;">
				<div class="detail-lef">订单编号</div>
				<div class="detail-rig">{{form.orderNo}}</div>
			</div>
			<div class="same-w" style="margin-top: 6px;">
				<div class="detail-lef">下单时间</div>
				<div class="detail-rig">{{form.gmtCreate}}</div>
			</div>
			<div class="same-w" style="margin-top: 6px;">
				<div class="detail-lef">支付时间</div>
				<div class="detail-rig">{{form.payDate}}</div>
			</div>
			<div class="same-w" style="margin-top: 6px;">
				<div class="detail-lef">支付方式</div>
				<div class="detail-rig">{{form.payTypeName}}</div>
			</div>
			<div class="same-w" style="margin-top: 6px;">
				<div class="detail-lef">使用时间</div>
				<div class="detail-rig">{{form.useDate}}</div>
			</div>
		</div>

		<div class="baseCon" style="margin-top: 12px;">
			<div class="zflex">
				<div class="same-lef" style="width: 120px;">退款原因</div>
				<div class="same-rig zflex zcenter">
					123
				</div>
			</div>
			<div style="color:#83878E;font-size: 13px;margin-top: 10px;">详情：没钱吃饭了，不加油了</div>
		</div>


		<div style="height: 100px;"></div>

		<div class="fix-bom" style="gap: 12px;" v-if="form.status==4">
			<div class="btn-pay btnT2" @click="show=true">拒绝退款</div>
			<div class="btn-pay btnT3" @click="okshowFun">同意退款</div>
		</div>


		<u-popup :show="show" @close="close">
			<view style="height: 300rpx;padding:30rpx 24rpx;">
				<u--textarea v-model="remark" placeholder="请输入拒绝原因"></u--textarea>
			</view>
			<view style="display: flex;padding:24rpx;">
				<view class="bottombtn popbom1" style="margin-right: 24rpx;" @click="show = false">关闭</view>
				<view class="bottombtn popbom2" @click="confirmError">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import headBar from '@/components/headerBar/headBar.vue'
	// #endif
	// #ifdef H5
	import headBar from '@/components/headerBar/kongbai.vue'
	// #endif
	import {
		detailsMerchant,
		checkRefund,
	} from '@/request/api.js'
	export default {
		components: {
			headBar
		},
		data() {
			return {
				eId: null,
				form: {},
				remark: '',
				show: false,
				checkStatus: null, //1同意 2不同意
			}
		},
		mounted() {

		},
		onShow() {

		},
		onLoad(e) {
			this.eId = e.id
			this.getDetail()
		},
		methods: {

			getDetail() {
				detailsMerchant(this.eId).then(res => {
					this.form = res.data
				})
			},
			okshowFun() {
				// this.okshow = true
				const that = this
				uni.showModal({
					title: "是否同意退款",
					content: "同意退款后，将不可追回，请谨慎操作",
					success: (res) => {
						if (res.confirm) {
							// this.confirmOk()
							that.checkStatus = 1
							that.confirmData()
						}
					},
				});
			},
			confirmError() {
				this.checkStatus = 2
				this.confirmData()
			},
			confirmData() {
				if (this.checkStatus == 2 && !this.remark) {
					uni.$u.toast('请输入')
					return
				}
				let data = {
					id: this.eId,
					checkStatus: this.checkStatus,
					checkRefundRemark: this.remark
				}
				checkRefund(data).then(res => {
					uni.$u.toast('已审核')
					this.getDetail()
					this.show = false
				})
			},
			close() {
				this.show = false
			},

			goPage(row) {
				uni.navigateTo({
					url: row,
				})
			},


		}
	}
</script>

<style scoped>
	.btnT2 {
		color: #4475EE;
		background: #fff;
		border: 1px solid #4475EE;
		width: 50%;
	}

	.btnT3 {
		background: #4475EE;
		border: 1px solid #4475EE;
		width: 50%;
	}
</style>